<template>
    <div id="BosVideo">
        <video @mouseover="showSubtitleSetting = false" ref="video" id="pvideo" class="video-js vjs-default-skin  vjs-big-play-centered" style="width:100vw; height:calc(100vh - 30px)"  controls preload="auto">
            <source :src="videoSrc" type="application/x-mpegURL">
            <track kind='captions' :src=vttSrc srclang='zh' label='开启字幕' class="Subtitle" default/>
        </video>
        <div id="settingBox">
            <div id="subtitleSettingIcon" @mouseover="overSub" @mouseleave="leaveSub">
                <div style="transform:translateY(4px);margin-right: 14px;"><img @click="showSubtitleSetting = !showSubtitleSetting" src="../../assets/img/setting.png" alt=""></div>
            </div>
            <div id="rateIcon" @mouseover="overRate" @mouseleave="leaveRate">
                <div style="font-size: 14px;color:#ffffff;margin-right: 3px;width: 30px;" @click="showPlaybackrate = !showPlaybackrate">{{rate_Text}}</div>
            </div>
        </div>
        
        <div v-if="showSubtitleSetting" >
            <ul class="subtitleSetting">
                <li >
                    <div style="text-align:center;" class="settingTitle">字幕开关</div>
                    <el-select v-model="subtitleSwitch" @change="setSwitch" popper-class="settingSelct">
                        <el-option
                            v-for="item in switchOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </li>
                <li>
                    <div style="text-align:center" class="settingTitle">字幕大小</div>
                    <el-select v-model="subtitlefs" @change="handleTextChange" popper-class="settingSelct">
                        <el-option
                            v-for="item in fsOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </li>
                <li>
                    <div style="text-align:center" class="settingTitle">字幕效果</div>
                    <el-select v-model="subtitleStroke" @change="handleTextChange" popper-class="settingSelct">
                        <el-option
                            v-for="item in strokeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </li>
                <li>
                    <div style="text-align:center" class="settingTitle">字幕颜色</div>
                    <el-select v-model="subtitleColor" @change="handleTextChange" popper-class="settingSelct">
                        <el-option
                            v-for="item in colorOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </li>
                <li style="width:200px;position: absolute;bottom:30px;left:20px">
                    <div style="margin-bottom: 15px;">透明度</div>
                    <!-- <div style="display:flex;justify-content: space-between;width: 210px;align-items:center;">
                        <i class="el-icon-remove-outline" @click="decrease" />
                        <el-progress :percentage="opacityVal" color="#409eff" style="width:140px" :text-inside="true" :stroke-width="14"></el-progress>
                        <i class="el-icon-circle-plus-outline" @click="increase" />
                    </div> -->
                    <slider :min="0" :max="100" v-model="opacityVal"></slider>
                </li>
            </ul>
        </div>
        <div v-if="showPlaybackrate" @mouseleave="showPlaybackrate = false" >
            <ul class="bpx-player-ctrl-playbackrate-menu" @click="pickRate($event,'playRate')">
                <li class="bpx-player-ctrl-playbackrate-menu-item " data-value="2" :class="{active_rate: playRate === '2' }">2.0x</li>
                <li class="bpx-player-ctrl-playbackrate-menu-item " data-value="1.5" :class="{active_rate: playRate === '1.5' }">1.5x</li>
                <li class="bpx-player-ctrl-playbackrate-menu-item " data-value="1.25" :class="{active_rate: playRate === '1.25' }">1.25x</li>
                <li class="bpx-player-ctrl-playbackrate-menu-item " data-value="1" :class="{active_rate: playRate === '1' }">1.0x</li>
                <li class="bpx-player-ctrl-playbackrate-menu-item " data-value="0.75" :class="{active_rate: playRate === '0.75' }">0.75x</li>
                <li class="bpx-player-ctrl-playbackrate-menu-item " data-value="0.5" :class="{active_rate: playRate === '0.5' }">0.5x</li>
            </ul>
        </div>
        <div v-if="showleft" class="marquee-left" width="15%" >
            <span>{{marquee}}</span>
        </div>
        <div v-if="showleft" class="marquee-right" width="15%" >
            <span>{{marquee}}</span>
        </div>
    </div>
</template>
<script>
import slider from './slider.vue'
import { SqlLib } from '../../../../../static/lib/sqlite/SqlLib'
import { SqlLibUser } from '../../../../../static/lib/sqlite/service/SqlLibUser'
import mixin from '../../mixin/mixin'

import { Ini } from '../../../content/utils/ini';
const cryUtil = require('../../../../../static/utils/CrypUtil');
import lang_zhcn from './zh-CN.json'
videojs.addLanguage('zh-CN', lang_zhcn);
export default {
    name: "BosVideo",
    mixins: [mixin],
    components: { slider },
    data () {
        return {
            videoSrc: '',
            showleft:true,
            player: null,
            marquee: '',
            marqueeTime:'',
            vttSrc:'',
            isVideoOver:false,
            showSetting:true,
            showSubtitleSetting:false,
            showPlaybackrate:false,//设置播放速度
            playRate:1,
            rate_Text:'倍速',
            subtitleSwitch: 1,
            switchOptions:[{
                label:'开启',
                value: 1
                },{
                label:'关闭',
                value: 0
            }],
            subtitlefs: 2,
            fsOptions:[{
                label:'较小',
                value:1,
            },{
                label:'适中',
                value:2,
            },{
                label:'较大',
                value:3,
            },{
                label:'最大',
                value:4,
            }],
            subtitleStroke:3,
            strokeOptions:[{
                label:'无',
                value:0,
            },{
                label:'重墨',
                value:1,
            },{
                label:'描边',
                value:2,
            },{
                label:'投影',
                value:3,
            }],
            opacityVal:100,
            subtitleColor: 0,
            colorOptions:[{
                label:'白色',
                value:0,
            },{
                label:'黑色',
                value:1,
            },{
                label:'红色',
                value:2,
            }],
            isVideoPause:false,
            mouseOverSub:false,
            mousehOverRate:false,
        }
    },
    watch: {
        opacityVal(val) {
            this.handleTextChange()
            console.log(val);
        },
    },
    created () {
       
        let sqlLib = SqlLib.getInstance(window.$DBDIR)
        let user = SqlLibUser.queryCurrentUser(sqlLib)
        //TODO:暂时使用VIP类别判断后续可能更改成付费策略
        let curVipType = user ? user.vipType : ''
        curVipType = cryUtil.aesDecrypt(curVipType, user.id, true);
        curVipType = Buffer.from(curVipType, 'base64').toString('utf8');
        this.marquee = user ? (curVipType === '0' ? user.schoolName : (user.mobile.slice(0, 3) + "****" + user.mobile.slice(7))) : ''
        let eduLevel = Ini.readIni('data', 'eduLevel')
        console.log(this.bsr);
        this.videoSrc = `http://127.0.0.1:${eduLevel === 'primary' ? '38001' : '38002'}/${this.bsr.meta_info.meta_type}/${this.bsr.meta_info.meta_id}/hlsIndex.m3u8`
        this.vttSrc = `http://127.0.0.1:${eduLevel === 'primary' ? '38001' : '38002'}/${this.bsr.meta_info.meta_type}/${this.bsr.meta_info.meta_id}/subtitle.vtt`;
        console.log(this.videoSrc );
    },
    mounted () {
        this.$nextTick(() => {
            this.player = videojs('pvideo', {
                preload: 'auto',
                language:'zh-CN',
                // tracks: [{src: this.vttSrc, kind:'captions', srclang: 'zh', label: ''}]
            })
           
            this.player.play()
            this.player.ready(function() {
                let _this = this
                _this.on('userinactive',
                function () {
                    //do something 当控制条隐藏时触发这个事件
                    if (!_this.isVideoOver && !_this.isVideoPause) {
                        console.log('控制条隐藏');
                        document.getElementById('settingBox').style.opacity = '0'
                    }          
                });
                _this.on('useractive',
                function () {
                    document.getElementById('settingBox').style.opacity = '1'
                    console.log('控制条出现');
                    //do something 当控制条显示时触发这个事件
                });
                _this.on("ended", function(){
                    _this.isVideoOver = true
                    document.getElementById('settingBox').style.opacity = '1'
                    console.log("视频播放结束");
                });
                _this.on("pause", function(){
                    _this.isVideoPause = true
                    document.getElementById('settingBox').style.opacity = '1'
                    console.log("视频播放暂停");
                });
                _this.on("play", function(){
                    _this.isVideoPause = false
                    _this.isVideoOver = false
                    console.log("视频播放");
                });
            });
        })
        setTimeout(() => {
            this.initStyle()
        }, 1000);
        
    },
    methods: {
        overSub(){
            this.showPlaybackrate = false
            this.showSubtitleSetting = true
            this.mouseOverSub = true
        },
        leaveSub(){
            if (!this.mouseOverSub) {
                this.showSubtitleSetting = false
            }
        },
        overRate(){
            this.showSubtitleSetting = false
            this.showPlaybackrate = true
            this.mousehOverRate = true
        },
        leaveRate(){
            if (!this.mousehOverRate) {
                this.showPlaybackrate = false
            }
        },
        // increase() {
        //     this.opacityVal += 10;
        //     if (this.opacityVal > 100) {
        //         this.opacityVal = 100;
        //     }
        //     this.handleTextChange()
        // },
        // decrease() {
        //     this.opacityVal -= 10;
        //     if (this.opacityVal < 0) {
        //         this.opacityVal = 0;
        //     }
        //     this.handleTextChange()
        // },
        setSwitch(val){//字幕开关
            var tracks = this.player.textTracks();
            for (var i = 0; i < tracks.length; i++) {
                var track = tracks[i];
                if (track.kind === 'captions' && track.language === 'zh') {
                    console.log(track);
                    if (val == 0) {
                        track.mode = 'hidden';
                    }else{
                        track.mode = 'showing';
                    }
                }
            }
        },
        
        handleTextChange(){
            let _this = this
            var tracks = this.player.textTracks();
            var metadataTrack = null;
            for (var i = 0; i < tracks.length; i++) {
                var track = tracks[i];
                if (track.kind === 'captions' && track.language === 'zh') {
                    metadataTrack = track;
                    console.log(track);
                }
            }
            _this.changefontSize()
            _this.changeStroke()
            _this.changeColor()
            _this.changeOpacity()
            metadataTrack.addEventListener('cuechange', function() {
                console.log('cuechange');
                _this.changefontSize()
                _this.changeStroke()
                _this.changeColor()
                _this.changeOpacity()
            });
        },
        initStyle(){
            let _this = this
            var tracks = _this.player.textTracks();
            var metadataTrack = null;
            for (var i = 0; i < tracks.length; i++) {
                var track = tracks[i];
                if (track.kind === 'captions' && track.language === 'zh') {
                    metadataTrack = track;
                    console.log(track);
                }
            }
            metadataTrack.addEventListener('cuechange', function() {
                console.log('initStyle');
                var father = window.document.getElementsByClassName('vjs-text-track-display')[0].getElementsByTagName('div')
                console.log(father);
                if (father) {
                    for (let i in father) {
                        if (father[2]) {
                            father[2].style.opacity = (_this.opacityVal / 100).toFixed(2)
                            father[2].style.color ='white'
                            father[2].style.textShadow = 'rgb(0 0 0) 1px 1px 2px, rgb(0 0 0) 0px 0px 1px'
                            father[2].style.fontSize = '44px'
                        }
                    }
                }
            });
        },
        //透明度
        changeOpacity(){
            var father = window.document.getElementsByClassName('vjs-text-track-display')[0].getElementsByTagName('div')
            // console.log(father);
            let _this = this
            for (let i in father) {
                if (father[2]) {
                    father[2].style.opacity = (_this.opacityVal / 100).toFixed(2)
                }
            }
        },
        // 大小
        changefontSize(){
            var father = window.document.getElementsByClassName('vjs-text-track-display')[0].getElementsByTagName('div')
            // console.log(father);
            let _this = this
            for (let i in father) {
                switch (_this.subtitlefs) {
                    case 1:
                        if (father[2]) {
                            father[2].style.fontSize = '36px'
                        }
                        break;
                    case 2:
                        if (father[2]) {
                            father[2].style.fontSize = '44px'
                        }
                        break;
                    case 3:
                        if (father[2]) {
                            father[2].style.fontSize = '52px'
                        }
                        break;
                    case 4:
                        if (father[2]) {
                            father[2].style.fontSize = '60px'
                        }
                        break;
                    default:
                        break;
                } 
            }
        },
        // 描边
        changeStroke(){
            var father = window.document.getElementsByClassName('vjs-text-track-display')[0].getElementsByTagName('div')
            // console.log(father);
            let _this = this
            for (let i in father) {
                switch (_this.subtitleStroke) {
                    case 0:
                        if (father[2]) {
                            father[2].style.textShadow = 'none'
                        }
                        break;
                    case 1:
                        if (father[2]) {
                            father[2].style.textShadow = 'rgb(0 0 0) 1px 0px 1px, rgb(0 0 0) 0px 1px 1px, rgb(0 0 0) 0px -1px 1px, rgb(0 0 0) -1px 0px 1px'
                        }
                        break;
                    case 2:
                        if (father[2]) {
                            father[2].style.textShadow = 'rgb(0 0 0) 0px 0px 1px, rgb(0 0 0) 0px 0px 1px, rgb(0 0 0) 0px 0px 1px'
                        }
                        break;
                    case 3:
                        if (father[2]) {
                            father[2].style.textShadow = 'rgb(0 0 0) 1px 1px 2px, rgb(0 0 0) 0px 0px 1px'
                        }
                        break;
                    default:
                        break;
                }
                
            }
        },
        // 颜色
        changeColor(){
            var father = window.document.getElementsByClassName('vjs-text-track-display')[0].getElementsByTagName('div')
            // console.log(father);
            let _this = this
            for (let i in father) {
                switch (_this.subtitleColor) {
                    case 0:
                        if (father[2]) {
                            father[2].style.color = 'white'
                        }
                        break;
                    case 1:
                        if (father[2]) {
                            father[2].style.color = 'black'
                        }
                        break;
                    case 2:
                        if (father[2]) {
                            father[2].style.color = 'red'
                        }
                        break;
                    default:0
                        break;
                }
                
            }
        },
        // 倍速
        pickRate(){
            // console.log(event.target.dataset.value);
            if (event.target.dataset.value){
                this.playRate = event.target.dataset.value;
                this.showPlaybackrate = false
                document.getElementsByTagName("video")[0].playbackRate = this.playRate
                if (this.playRate != 1) {
                    this.rate_Text = this.playRate + 'x'
                }else{
                    this.rate_Text = '倍速'
                }

            }
        },
        openSetting(){
            this.showSetting = !this.showSetting
        },
    }
}

</script>

<style lang="scss" scope>
*{
    list-style: none;
}
#BosVideo {
    position: relative;
    overflow: hidden;
    .playBox{
        overflow-x: hidden;
        box-sizing: border-box;
        width: 100vw;
        video{
            height:calc(100vh - 30px);
        }
        // .dplayer-controller{
        //     bottom: 70px;
        // }
        .dplayer-full{
            display: none;
        }
    }
    .marquee-left {
        color: rgba(255, 255, 255, 0.7);
        font-size: 18px;
        width: auto;
        opacity: 0;
        position: absolute;
        bottom: 40px;
        left: 4.5%;
        animation: left 16s 1s linear infinite;
    }
    .marquee-right {
        color: rgba(255, 255, 255, 0.7);
        font-size: 20px;
        width: auto;
        opacity: 0;
        position: absolute;
        bottom: 40px;
        text-align: right;
        right: 4.5%;
        animation: right 16s 1s linear infinite;
    }
    @keyframes left {
        0%{
            opacity: 0;
        }
        12%{
            opacity: 0.5;
        }
        25%{
            opacity: 1;
        }
        50%{
            opacity: 0;
        }
        100%{
            opacity: 0;
        }
    }
    @keyframes right {
      0%{
          opacity: 0;
      }
      50%{
          opacity: 0;
      }
      62%{
          opacity: 0.5;
      }
      75%{
          opacity: 1;
      }
      100%{
          opacity: 0;
      }
    }
    .video-js .vjs-volume-panel.vjs-volume-panel-horizontal {
        width: 9em;
    }
    .video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
        width: 5em;
        height: 3em;
    }
    .video-js .vjs-volume-panel .vjs-volume-control {
        // visibility: visible;
        opacity: 1;
        position: relative;
    }
}

#settingBox{
    display: flex;
    align-items: center;
    width: auto;
    line-height: 30px;
    position: absolute;
    right: 30px;
    bottom: -1px;
    z-index: 9999!important;
    cursor: pointer;
    transition: opacity 1s ;
}
.subtitleSetting{
    background-color: rgba(21,21,21,.9);
    position: absolute;
    box-sizing: border-box;
    width: 260px;
    height: 260px;
    right: 81px;
    bottom: 14px;
    z-index: 999!important;
    border-radius: 2px;
    padding:10px 20px;
    display:grid;
    grid-template-columns: repeat(2,2fr);
    grid-template-rows: repeat(2,80px);
    grid-gap: 0px 20px;
    // white-space: nowrap;
    li{
        position: relative;
        line-height: 36px;
        cursor: pointer;
        color: #fff;
        font-size: 14px;
        padding: 0 5px;
        // display: flex;
        .settingTitle{
            text-align: center;
            // margin-left: 5px;
        }
    }

    .el-input__inner {
        width: 90px;
        height: 26px ;
        border-radius: 2px;
        color: #fff;
        background-color: #212121;
        border: 1px solid silver;
        font-size: 12px!important ;
        padding-left:16px !important;
    }
    .el-select .el-input .el-select__caret{
        font-size: 12px!important;
    }
    
    .el-select .el-input__inner:focus{
        border-color: #fff!important;
    }
    .el-select .el-input.is-focus .el-input__inner{
        border-color: #fff!important;
        // border-bottom:  none;
    }
    .el-select-dropdown{
        border: none;
        border-radius: 0 0 2px 2px !important;
    }
}
.settingSelct{
    border: none;
    border-radius: 0 0 2px 2px !important;
    margin-top:-6px!important;
    .el-select-dropdown__item{
        font-size: 12px!important;
        color: #fff !important;
        height: 26px !important;
        line-height: 26px!important;
        background-color: #212121!important;
    }
    .el-select-dropdown__item.selected{
        color: #fff;
    
    }
    .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
        background-color: rgba(44, 42, 42, 0.9) !important;
    }
    
    .popper__arrow{
        display: none!important;;
    } 
    .el-select-dropdown__list{
        padding: 0px !important;
    }
    .el-popper{
        margin-top:-6px!important;
    }
}

// .el-select-dropdown__item{
//     font-size: 12px!important;
//     color: #fff !important;
//     height: 26px !important;
//     line-height: 26px!important;
//     background-color: #212121!important;
// }
// .el-select-dropdown__item.selected{
//     color: #fff;

// }
// .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
//     background-color: rgba(44, 42, 42, 0.9) !important;
// }

// .el-select-dropdown{
//     border: none;
//     border-radius: 0 0 2px 2px !important;
// }
// .el-select-dropdown__list{
//     padding: 0px !important;
// }
// .el-popper{
//     margin-top:-6px!important;
// }



.bpx-player-ctrl-playbackrate-menu{
    border-radius: 2px;
    background-color: rgba(21,21,21,.9);
    width: 70px;
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    position: absolute;
    right: 12px;
    bottom: 30px;
    z-index: 9999!important;
    .bpx-player-ctrl-playbackrate-menu-item {
        position: relative;
        height: 36px;
        line-height: 36px;
        cursor: pointer;
        color: #fff;
    }
    .bpx-player-ctrl-playbackrate-menu-item:hover{
        color: #00a1d6;
    }
    .bpx-player-ctrl-playbackrate-menu-item.active_rate {
        color: #00a1d6;
    }
}










.vjs-fullscreen-control.vjs-control.vjs-button{
    display: none;
}
.vjs-subs-caps-button {
    display: none;
}
.video-js .vjs-time-control{
    padding-right: 12em;
}
.vjs-text-track-display{//修改字幕样式
    div{
        background-color: transparent!important;
        letter-spacing: 2px;
        font-weight: 500;
        bottom: -25px !important;
        // text-shadow: rgb(0 0 0) 1px 1px 2px , rgb(0 0 0) 0px 0px 1px;
    }
}
</style>
